<template>
	<view>
		<!-- 分类页面 -->
		<view class="nav">
			<view :class="[num=='1'? 'active':'','new']" @click="showNew">
				新品
			</view>
			<view class="sales" @click="showSales">
				<view :class="[num=='2'? 'active':'','salesName']">销量</view>
				<view class="salesIcon">
					<view class="salesUp">
						<icon :class="[arrows=='up'? 'active':'']" class="iconfont icon-arrow-up-bold"></icon>
					</view>
					<view class="salesDown">
						<icon :class="[arrows=='down'? 'active':'']" class="iconfont icon-arrow-down-bold"></icon>
					</view>
				</view>

			</view>
			<view class="price" @click="showPrice">
				<view :class="[num=='3'? 'active':'','priceName']">价格</view>
				<view class="priceIcon">

					<view class="priceUp">
						<icon :class="[arrowsPri=='up'? 'active':'']" class="iconfont icon-arrow-up-bold"></icon>
					</view>
					<view class="priceDown">
						<icon :class="[arrowsPri=='down'? 'active':'']" class="iconfont icon-arrow-down-bold"></icon>
					</view>
				</view>
			</view>
			<view :class="[num=='4'? 'active':'','filt']" @click="showFilt">
				筛选
			</view>
		</view>


		<view class="product">
			<view class="proCard" v-for="item in list" :key="item.id"  @click="goCommodity(item.id)">
				<image :src="item.pic" mode=""></image>
				<view class="proInfo">
					<view class="proName">
						{{item.name}}
					</view>
					<view class="proPrice">
						¥{{item.price}}
						<view class="logoText">
							不凡
						</view>
						
					</view>
				</view>
			</view>
		</view>











	</view>
</template>

<script>
	import {
		findProductList
	} from "../../../api/kind/index.js"
	export default {
		data() {
			return {
				ids: "",
				list: [],
				num:"1",
				arrows:"",
				arrowsPri:"",
				isDesc:"",
				sortBy:""
			}
		},
		onLoad(val) {
			
			//商品id传入
			this.ids = val
			console.log(this.ids)
			//商品数据传入
			this.getData();
		},
		methods: {
			//商品数据传入
			getData(){
			try{
				findProductList("1", "6", {
					categoryId: this.ids.id,
					isDesc: this.isDesc,
					sortBy: this.sortBy
				}).then(res => {
					console.log(res)
					this.list = res.data.rows
				})
			}catch(e){
				//TODO handle the exception
			}
			},
			
			
			
			// 新品
			showNew(){
				// 选中变红
				this.num="1"
				//取消销量红箭头
				this.arrows=""
				//取消价格红箭头
				this.arrowsPri=""
				
				this.isDesc=""
				this.sortBy=""
				
				this.getData();
			},
			// 销量
			showSales(){
				this.num="2";
				this.arrowsPri=""
				if(this.arrows==""){
					this.arrows="up"
					this.isDesc="1"
					this.sortBy="sale"
				}else if(this.arrows=="up"){
					this.arrows="down"
					this.isDesc="0"
					this.sortBy="sale"
				}else if(this.arrows=="down"){
					this.arrows="up"
					this.isDesc="1"
					this.sortBy="sale"
				}
				
				
				this.getData();
				
			},
			// 价格
			showPrice(){
				this.num="3"
				this.arrows=""
				if(this.arrowsPri==""){
					this.arrowsPri="up"
					this.isDesc="1"
					this.sortBy="price"
				}else if(this.arrowsPri=="up"){
					this.arrowsPri="down"
					this.isDesc="0"
					this.sortBy="price"
				}else if(this.arrowsPri=="down"){
					this.arrowsPri="up"
					this.isDesc="1"
					this.sortBy="price"
				}
				
				
				
				this.getData();
			},
			// 筛选
			showFilt(){
				// 选中变红
				this.num="4"
				//取消销量红箭头
				this.arrows=""
				//取消价格红箭头
				this.arrowsPri=""
				
				this.isDesc=""
				this.sortBy=""
				
				this.getData();
			},
			//前往商品详情页
			goCommodity(val){
				uni.navigateTo({
					url:`../../home/commodity/commodity?id=${val}`
				})
			}
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #F1ECE7;
	}
</style>

<style lang="scss" scoped>
	//顶部导航栏
	.active{
		color: red;
	}
	.nav {
		width: 100%;
		height: 31px;
		background-color: #354e44;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #fff;

		// 导航栏销量设置
		.sales {
			display: flex;

			.salesIcon {
				position: relative;
				top: -8px;
				left: 5px;

				.salesUp,
				.salesDown {
					width: 12px;
					height: 12px;


				}
			}
		}

		// 导航栏价格设置
		.price {
			display: flex;

			.priceIcon {
				position: relative;
				top: -8px;
				left: 5px;

				.priceUp,
				.priceDown {
					width: 12px;
					height: 12px;


				}
			}
		}
	}


	//商品卡片设置
	
	.product {
		margin: 0 20px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 25px;
		
		.proCard {
			width: 158px;
			height: 209px;
			flex-shrink: 0;
			background-color: #ffffff;
			margin-bottom: 20px;
			image {
				width: 100%;
				height: 119px;

			}
			.proInfo{
				padding: 18px;
				.proName {
					color: #3e3e3e;
					line-height: 19px;
					margin-top: 4px;
					font-weight: 700;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				.proPrice{
					margin-top: 10px;
					font-size: 13px;
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
</style>
